<script setup>
import EnvConfig from '@core/utils/EnvConfig';
import IconMessage from '@main/assets/message.svg';
import IconSettings from '@main/assets/settings.svg';
import IconHelp from '@main/assets/help.svg';
import LogoCtWhite from '@/assets/logo.ctyun.white.svg';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

const isConnectToPublicPlatform = EnvConfig.isConnectToPublicPlatform();
</script>

<template>
  <header class="navigator-header">
    <div class="navigators">
      <a href="https://www.ctyun.cn/" target="_blank" class="logo-container"><LogoCtWhite class="logo" /></a>
      <ElDivider class="divider" direction="vertical" />
      <a class="console-center" href="https://console.ctyun.cn/" target="_blank">{{t('consoleCenter')}}</a>
      <Suspense v-if="isConnectToPublicPlatform">
        <RegionSelector />
        <template #fallback>
          <div v-loading="true" class="region-selector-placeholder" />
        </template>
      </Suspense>
    </div>
    <div class="operations">
      <!-- <MoreOperationsMenu /> -->
      <LanguageSelector />
      <UserMenu />
      <ElDivider class="divider" direction="vertical" />
      <a class="icon-container" href="https://www.ctyun.cn/h5/console/msg/list/unread" target="_blank">
        <IconMessage />
      </a>
      <a class="icon-container" href="https://console.ctyun.cn/console/index/#/quota" target="_blank">
        <IconSettings />
      </a>
      <a class="icon-container" href="https://www.ctyun.cn/document/" target="_blank">
        <IconHelp />
      </a>
    </div>
  </header>
</template>

<i18n lang="yaml" locale="zh-CN">
  consoleCenter: '控制中心'
</i18n>

<style lang="scss" scoped>
.navigator-header {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 50px;
  padding: 0 30px 0 0;
  font-size: 12px;
  color: #fff;
  background-color: #272b39;

  .navigators {
    display: flex;
    flex-direction: row;
    align-items: center;

    .logo-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 12px 3px 16px 30px;
    }

    .logo {
      width: 90px;
      height: 22px;
    }

    .divider {
      margin: 0 12px 0 15px;
    }

    .console-center {
      margin-right: 30px;
      color: #fff;
      text-decoration: none;
    }

    .region-selector-placeholder {
      width: 160px;
      height: 30px;
      background-color: #353f58;
      border-radius: 15px;

      :deep(.cns-main-app-el-loading-mask) {
        background-color: transparent;
        transform: scale(0.5);
      }
    }
  }

  .operations {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 4px;
    color: #c2c2c2;

    .divider {
      margin: 0 30px;
    }

    .icon-container {
      display: flex;
      align-items: center;
      justify-items: center;
      width: 18px;
      height: 18px;
      margin-right: 36px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
